<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小练习</title>
    <style>
        .yiru {
            background-color: coral;
            width: 300px;
            height: 300px;
        }
        .a{
            background-color: coral;
        }

        div {
            background-color: brown;
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>
<div id="root">
    <div :class="{yiru: yi==1}" @click="bian"></div>
    <div :style="bc" @mouseout="MU" @mouseover="MV"></div>
    <div><span @click="xuan('军事')" :class="{a:b=='军事'}">军事</span> <span @click="xuan('科技')" :class="{a:b=='科技'}">科技</span></div>
    <div :style="{one:true}"></div>
</div>
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let app = new Vue({
        el: "#root",
        //数据源
        data: {
            bc: {
                backgroundColor: "red"
            },
            bc2: {
                backgroundColor: "blue"
            },
            yi: 1,
            hua: {yiru: true},
            b:"军事",
            one:{
                width:"300px",
                height:"300px",
                backgroundColor:"red"
            },
            two:true,

        },
        //函数
        methods: {
            bian() {
                this.yi = false;
            },
            MU() {
                this.bc.backgroundColor = "red";
            },
            MV() {
                this.bc.backgroundColor = "blue";
            },
            xuan(s){
this.b=s;
            }
        },

    })
</script>